import { toast } from '@/utils/extendApi'
// 引入SDK核心类，用于逆地址解析
import QQMapWX from '../../../libs/qqmap-wx-jssdk.min'
// 导入async-validator进行表单校验
import Schema from 'async-validator'
import {
  reqAddAddress,
  reqAddressDetail,
  reqUpdateAddress
} from '../../../api/address'
Page({
  // 页面的初始数据
  data: {
    // 微信小程序中的model:只能绑定非引用类型的数据
    name: '', //收货人
    phone: '', //手机号码
    provinceName: '', //省
    provinceCode: '', //省编码
    cityName: '', //市
    cityCode: '', //市编码
    districtName: '', //区
    districtCode: '', //市编码
    address: '', //详细地址
    fullAddress: '', //完整地址
    isDefault: 0 // 是否设置为默认地址 0:不设置 1:设置为默认地址
  },
  // 省市区选择
  onAddressChange(event) {
    const { code, value } = event.detail
    /*console.log(event.detail)
      code: (3) ["110000", "110100", "110101"]
      postcode: "100010"
      value: (3) ["北京市", "北京市", "东城区"]*/
    // 将用户选择的城市名和编码进行存储
    this.setData({
      provinceName: value[0],
      cityName: value[1],
      districtName: value[2],
      provinceCode: code[0],
      cityCode: code[1],
      districtCode: code[2]
    })
  },
  // 点击定位图标的回调，使用wx.getLocation()获取用户地理信息
  /*   async onLocation() {
    // 1.获取用户所有的授权信息
    const { authSetting } = await wx.getSetting()
    // 2.判断用户是否已经拒绝了授权 返回 true:同意 false:拒绝 undefined:尚未发起授权
    if (authSetting['scope.userLocation'] === false) {
      // 5.用户第一次拒绝了授权又一次发起了请求授权
      // 6.弹窗询问是否授权 返回 true/false
      const modalRes = await modal('授权提示', '需要获取地理位置信息，请允许')
      // 7.如果用户点击取消，拒绝授权
      if (!modalRes) {
        toast('取消授权')
      } else {
        // 8.用户点击了确定，允许授权
        // wx.openSetting() 打开微信客户端小程序授权页面,返回用户授权信息
        const { authSetting } = await wx.openSetting()
        // 9.判断用户在设置页面是否进行了授权
        if (authSetting['scope.userLocation']) {
          // 获取地址位置
          try {
            // 获取用户地理位置信息,点击取消会抛出错误信息
            const locationRes = await wx.getLocation()
            console.log(locationRes)
          } catch (error) {
            toast('获取位置信息失败')
          }
        } else {
          toast('获取位置信息失败')
        }
      }
    } else {
      // 3.用户已经授权或第是一次授权
      try {
        // 4.获取用户地理位置信息,点击取消会抛出错误信息
        const locationRes = await wx.getLocation()
        console.log(locationRes)
      } catch (error) {
        toast('获取位置信息失败')
      }
    }
  }, */
  // 点击定位图标的回调，使用wx.chooseLocation()获取用户地理信息
  async onLocation() {
    // 获取用户选择的精度，维度和选择地址的名字
    const { longitude, latitude, name } = await wx.chooseLocation()
    // 使用腾讯位置提供的功能进行逆地址解析
    this.qqmapsdk.reverseGeocoder({
      location: {
        longitude,
        latitude
      },
      success: (res) => {
        // 获取省市区编码以及省市区
        const { adcode, province, city, district } = res.result.ad_info
        // 获取街道和门牌
        const { street, street_number } = res.result.address_component
        // 获取标准地址
        const {
          standard_address
        } = res.result.formatted_addresses.standard_address
        // 对获取的数据进行格式化，组织，存储到data中
        this.setData({
          provinceName: province,
          // 省编码 adcode取前两位后面为0
          provinceCode: adcode.substring(0, 2) + '0000',
          cityName: city,
          // 市编码 adcode取前四位后面为0
          cityCode: adcode.substring(0, 4) + '00',
          districtName: district,
          // 东莞市，中山市，儋州市，嘉峪关市 其下无区县级
          districtCode: adcode & '',
          // 详细地址
          address: street + street_number + name,
          // 完整地址
          fullAddress: standard_address + name
        })
      }
    })
  },
  // 点击开关的事件回调
  switchChange(event) {
    this.setData({
      isDefault: event.detail.value ? 1 : 0
    })
  },
  // 点击保存按钮的回调
  async saveAddrssForm() {
    const { address, districtName, cityName, provinceName } = this.data
    // 1. 拼接完整的地址
    const fullAddress = provinceName + cityName + districtName + address
    // 2. 合并接口请求参数
    const params = {
      ...this.data,
      fullAddress
    }
    // 3.表单校验  验证成功才会继续向下执行
    await this.validatorAddress(params)
    // 4.发请求
    // 判断新增还是更新
    const res = await (this.addressId
      ? reqUpdateAddress(params)
      : reqAddAddress(params))
    if (res.code === 200) {
      // 5.跳转到收货地址详情页面
      await wx.navigateBack() // wx.navigateBack()异步API支持Promise调用
      toast(this.addressId ? '更新收货地址成功' : '新增收货地址成功')
    } else {
      toast(this.addressId ? '更新收货地址失败' : '新增收货地址失败')
    }
  },
  // 用于对收集到的数据进行校验
  validatorAddress(params) {
    // 创建验证规则
    const rules = {
      name: [
        { required: true, message: '请输入收货人姓名' },
        {
          pattern: '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$',
          message: '收货人姓名不合法'
        }
      ],
      phone: [
        { required: true, message: '请输入收货人手机号' },
        {
          pattern:
            '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$',
          message: '收货人手机号不合法'
        }
      ],
      provinceName: [{ required: true, message: '请选择收货地址' }],
      address: [{ required: true, message: '请输入详细地址' }]
    }
    // 实例化并传入验证规则
    const validator = new Schema(rules)
    // 调用实例方法对请求参数验证
    // 注意：将验证结果通过Promise返回给函数调用者
    return new Promise((resolve, reject) => {
      validator.validate(params, (errors) => {
        if (errors) {
          // 验证失败
          toast(errors[0].message)
          reject(new Error('error'))
        } else {
          resolve('ok')
        }
      })
    })
  },
  // 用于处理更新相关的逻辑
  async updateAddressInfo(id) {
    // 修改页面标题为更新收货地址
    wx.setNavigationBarTitle({
      title: '更新收货地址'
    })
    // 获取当前id对应地址详情
    const result = await reqAddressDetail(id)
    if (result.code === 200) {
      // 获取服务器返回的当前地址的详细信息
      const { data } = result
      // 对当前地址信息进行更新
      this.setData(data)
    }
  },
  onLoad: function (options) {
    // 实例化API核心类
    this.qqmapsdk = new QQMapWX({
      key: 'L6TBZ-GY3CT-KLGXO-VUSJI-INQS3-ZOBCQ'
    })
    // 接收列表页面传递的地址id，并存储到this对象上便于在多个函数中进行调用
    this.addressId = options.id
    if (options.id) {
      // 如果有id则时更新地址，否则为新增地址
      this.updateAddressInfo(options.id)
    }
  }
})
